﻿<%@ Page Title="" Language="C#" MasterPageFile="~/SiteRequireLogin.Master" AutoEventWireup="true" CodeBehind="Chart.aspx.cs" Inherits="TranTekBE.Upload.Chart" %>

<%@ Register Src="~/Admin/UserControl/MenuAdmin.ascx" TagPrefix="uc1" TagName="MenuAdmin" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <link href="../Maintenance/css/bootstrap.css" rel="stylesheet" />
    <link href="../Maintenance/css/custom.css" rel="stylesheet" />
    <link href="../Maintenance/css/whmcs.css" rel="stylesheet" />
    <script src="../Maintenance/js/whmcs.js"></script>
    <script src="../Scripts/jsLib.js"></script>
    <script type="text/javascript" src="//www.google.com/jsapi"></script>
    <script type="text/javascript">
        function LoadJS() {
            $("#<%=test.ClientID%>").datepicker({
                changeMonth: true,
                changeYear: true,
                showButtonPanel: true,
            });
            $("#<%=datebar.ClientID%>").datepicker({
                changeMonth: true,
                changeYear: true,
                showButtonPanel: true,
            });
            $("#<%=start.ClientID%>").datepicker({
                changeMonth: true,
                changeYear: true,
                showButtonPanel: true,
            });
            $("#<%=end.ClientID%>").datepicker({
                changeMonth: true,
                changeYear: true,
                showButtonPanel: true,
            });
        }
    </script>

    <script type="text/javascript">
        google.load('visualization', '1', { packages: ['corechart'] });
        google.load('visualization', '1', { packages: ['table'] });
    </script>
    <script type="text/javascript">
        function getpie() {
            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: 'Chart.aspx/getdata',
                contentType: "application/json",
                data: "{'date': '" + $('#<%=test.ClientID%>').val() + "','store':'" + $('#<%=idstore.ClientID%>').val() + "'}",
                    success:
                        function (response) {
                            drawVisualization(response.d);
                        },
                    error: function (xhr, status) {
                        alert("Có lổi xảy ra :)) : " + status);
                    }
                });
            }
            function getbar() {
                $.ajax({
                    type: 'POST',
                    dataType: 'json',
                    url: 'Chart.aspx/getbar',
                    contentType: "application/json",
                    data: "{'date': '" + $('#<%=datebar.ClientID%>').val() + "'}",
                success:
                    function (response) {
                        drawChart(response.d);
                    },
                error: function (xhr, status) {
                    alert("Có lổi xảy ra :)) : " + status);
                }
            });
        }
        function getline() {
            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: 'Chart.aspx/getline',
                contentType: "application/json",
                data: "{'store': '" + $('#<%=storeid.ClientID%>').val() + "','start': '" + $('#<%=start.ClientID%>').val() + "', 'end': '" + $('#<%=end.ClientID%>').val() + "'}",
                success:
                    function (response) {
                        drawVisualization2(response.d);
                    },
                error: function (xhr, status) {
                    alert("Có lổi xảy ra :)) : " + status);
                }
            });
        }
        // chay cac biểu đồ mặc định khi load trang lần đầu
        $(document).ready(function () {
            $.ajax({
                type: 'POST',
                dataType: 'json',
                contentType: 'application/json',
                url: 'Chart.aspx/getnow',
                data: '{}',
                success:
                    function (response) {
                        drawVisualization(response.d);
                    }

            });
            $.ajax({
                type: 'POST',
                dataType: 'json',
                contentType: 'application/json',
                url: 'Chart.aspx/getbarnow',
                data: '{}',
                success:
                    function (response) {
                        drawChart(response.d);
                    }

            });
            $.ajax({
                type: 'POST',
                dataType: 'json',
                contentType: 'application/json',
                url: 'Chart.aspx/getnowline',
                data: '{}',
                success:
                    function (response) {
                        drawVisualization2(response.d);
                    }

            });
        })

        $(document).ready(function () {
            drawVisualization2();
        });
        function drawVisualization(dataValues) {
            var data1 = new google.visualization.DataTable();
            var data2 = new google.visualization.DataTable();
            data1.addColumn('string', 'Loại');
            data1.addColumn('number', 'Số lượng');
            data2.addColumn('string', 'Loại');
            data2.addColumn('number', 'Giá trị');
            for (var i = 0; i < 3; i++) {
                data1.addRow([dataValues[i].ColumnName, dataValues[i].Value]);
            }
            for (var i = 3; i < dataValues.length; i++) {
                data2.addRow([dataValues[i].ColumnName, dataValues[i].Value]);
            }
            var options1 = {
                title: "Biểu đồ hàng tồn kho theo nhóm\n\r Ngày: " + $('#<%=test.ClientID%>').val(),
                slices: {
                    1: { offset: 0.2 }
                },
                pieHole: 0.21,
                pieStartAngle: 100,
            };
            var options2 = {
                title: "Biểu đồ hàng tồn kho theo giá trị\n\r Ngày: " + $('#<%=test.ClientID%>').val(),
                slices: {
                    1: { offset: 0.2 }
                },
                pieHole: 0.21,
                pieStartAngle: 100,
            };
            var chart1 = new google.visualization.PieChart(document.getElementById('visualization2')).
                draw(data1, options1);
            var chart2 = new google.visualization.PieChart(document.getElementById('visualization1')).
                draw(data2, options2);

            var table1 = new google.visualization.Table(document.getElementById('table_div1'));
            table1.draw(data1, { showRowNumber: true });

            var table2 = new google.visualization.Table(document.getElementById('table_div2'));
            table2.draw(data2, { showRowNumber: true });

            // When the table is selected, update the orgchart.
            google.visualization.events.addListener(table1, 'select', function () {
                chart1.setSelection(table1.getSelection());
            });

            // When the orgchart is selected, update the table visualization.
            google.visualization.events.addListener(chart1, 'select', function () {
                table1.setSelection(chart1.getSelection());
            });
            google.visualization.events.addListener(table1, 'sort',
              function (event) {
                  data1.sort([{ column: event.column, desc: !event.ascending }]);
                  chart1.draw(data1, options);
              });


        }
        function drawVisualization2(dataValues) {
            // Create and populate the data table.
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Year');
            data.addColumn('number', 'Bán nhanh');
            data.addColumn('number', 'Bán vừa');
            data.addColumn('number', 'Bán chậm');
            for (var i = 0; i < dataValues.length; i++) {
                data.addRow([dataValues[i].ColumnName1, { v: dataValues[i].Value1, f: dataValues[i].ColumnName2 }, { v: dataValues[i].Value2, f: dataValues[i].ColumnName3 }, { v: dataValues[i].Value3, f: dataValues[i].ColumnName4 }]);
            }
            var options = {
                width: 1000,
                height: 340,
                legend: 'right',
                focusTarget: 'category'
            };
            // Create and draw the visualization.
            var chart = new google.visualization.LineChart(document.getElementById('visualization3')).
                draw(data, options);
            var table = new google.visualization.Table(document.getElementById('visualization3table'));
            table.draw(data, { showRowNumber: true });

            // When the table is selected, update the orgchart.
            google.visualization.events.addListener(table, 'select', function () {
                chart.setSelection(table.getSelection());
            });

            // When the orgchart is selected, update the table visualization.
            google.visualization.events.addListener(chart, 'select', function () {
                table.setSelection(chart.getSelection());
            });
            google.visualization.events.addListener(table, 'sort',
              function (event) {
                  data.sort([{ column: event.column, desc: !event.ascending }]);
                  chart.draw(data, options);
              });
        }


        function drawChart(dataValues) {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Cửa Hàng');
            data.addColumn('number', 'Bán nhanh');
            data.addColumn('number', 'Bán vừa');
            data.addColumn('number', 'Bán chậm');
            for (var i = 0; i < dataValues.length; i++) {
                data.addRow([dataValues[i].ColumnName, dataValues[i].Value1, dataValues[i].Value2, dataValues[i].Value3]);
            }
            var options = {
                title: 'Biểu đồ cột so sánh tồn kho của các cửa hàng',
                vAxis: { title: 'Giá trị theo đợn vị VNĐ', titleTextStyle: { color: 'red' } },
                hAxis: { title: 'Tên các cửa hàng', titleTextStyle: { color: 'red' } },
                seriesType: "bars",
                // series: {
                //    3: { type: "line" }
                // }

            };
            var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
            chart.draw(data, options);
            var table = new google.visualization.Table(document.getElementById('table_div'));
            var data2 = new google.visualization.DataTable();
            data2.addColumn('string', 'Cửa Hàng');
            data2.addColumn('number', 'Bán nhanh');
            data2.addColumn('number', 'Bán vừa');
            data2.addColumn('number', 'Bán chậm');
            data2.addColumn('number', '% Bán nhanh');
            data2.addColumn('number', '% Trung chậm');
            for (var i = 0; i < dataValues.length; i++) {
                data2.addRow([dataValues[i].ColumnName, { v: dataValues[i].Value1, f: dataValues[i].ColumnName1 }, { v: dataValues[i].Value2, f: dataValues[i].ColumnName2 }, { v: dataValues[i].Value3, f: dataValues[i].ColumnName3 }, dataValues[i].Value4, dataValues[i].Value5]);
            }

            table.draw(data2, { showRowNumber: true });

            // When the table is selected, update the orgchart.
            google.visualization.events.addListener(table, 'select', function () {
                chart.setSelection(table.getSelection());
            });

            // When the orgchart is selected, update the table visualization.
            google.visualization.events.addListener(chart, 'select', function () {
                table.setSelection(chart.getSelection());
            });
            google.visualization.events.addListener(table, 'sort',
              function (event) {
                  data.sort([{ column: event.column, desc: !event.ascending }]);
                  chart.draw(data, options);
              });

        }
    </script>


</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="BodyContent" runat="server">
    <div class="whmcscontainer">
        <div class="contentpadded">
            <!-- Bắt đầu menu top -->
            <uc1:MenuAdmin runat="server" ID="MenuAdmin" />
            <!-- Kết thúc menu top -->

            <div class="page-header">
                <div class="styled_title">
                    <h2>Biểu đồ tròn<br />
                        <small>Tại đây bạn có thể xem chi tiết về hàng tồn kho thể hiện qua biểu đồ tròn</small></h2>
                </div>
            </div>
            <fieldset class="control-group">
                <div class="row">
                    <div class="multicol">
                        <div class="control-group">
                            <label class="control-label bold" for="name">
                                Chọn ngày:
                            </label>
                            <div class="controls">
                                <asp:TextBox ID="test" runat="server" onchange="getpie();"></asp:TextBox>
                            </div>
                        </div>
                    </div>
                    <div class="multicol">
                        <div class="control-group">
                            <label class="control-label bold" for="name">
                                Chọn cửa hàng:
                            </label>
                            <div class="controls">
                                <asp:DropDownList ID="idstore" runat="server" onchange="getpie();"></asp:DropDownList>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="multicol">
                        <div class="control-group">
                            <div class="controls">
                                <div id="visualization1" style="width: 420px;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="multicol">
                        <div class="control-group">
                            <div class="controls">
                                <div id="visualization2" style="width: 420px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="multicol">
                        <div class="control-group">
                            <div class="controls">
                                <div id="table_div2" style="width: 420px;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="multicol">
                        <div class="control-group">
                            <div class="controls">
                                <div id="table_div1" style="width: 420px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </fieldset>
            <div class="page-header">
                <div class="styled_title">
                    <h2>Biểu đồ đường<br />
                        <small>Tại đây bạn có thể xem chi tiết về hàng tồn kho thể hiện qua biểu đồ đường</small></h2>
                </div>
            </div>

            <fieldset class="control-group">

                <div class="row">
                    <div class="multicol">
                        <div class="control-group">
                            <label class="control-label bold" for="name">
                                Chọn cửa hàng:
                            </label>
                            <div class="controls">
                                <asp:DropDownList ID="storeid" runat="server" onchange="getline();"></asp:DropDownList>
                            </div>
                        </div>
                    </div>
                    <div class="multicol">
                        <div class="control-group">
                            <label class="control-label bold" for="name">
                                Ngày bắt đầu:
                            </label>
                            <div class="controls">
                                <asp:TextBox ID="start" runat="server" onchange="getline();"></asp:TextBox>
                            </div>
                        </div>
                    </div>
                    <div class="multicol">
                        <div class="control-group">
                            <label class="control-label bold" for="name">
                                Ngày kết thúc:
                            </label>
                            <div class="controls">
                                <asp:TextBox ID="end" runat="server" onchange="getline();"></asp:TextBox>
                            </div>
                        </div>
                    </div>
                    <div class="multicol">
                        <div class="control-group">
                            <div class="controls">
                                <div id="visualization3"></div>
                                <div class="controls">
                                    <div id='visualization3table'></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </fieldset>
            <div class="page-header">
                <div class="styled_title">
                    <h2>Biểu đồ cột<br />
                        <small>Tại đây bạn có thể xem so sánh chi tiết về hàng tồn kho thể hiện qua biểu đồ cột</small></h2>
                </div>
            </div>

            <fieldset class="control-group">

                <div class="row">
                    <div class="multicol">
                        <div class="control-group">
                            <label class="control-label bold" for="name">
                                Chọn ngày:
                            </label>
                            <div class="controls">
                                <asp:TextBox ID="datebar" runat="server" onchange="getbar();"></asp:TextBox>
                            </div>
                        </div>
                    </div>
                    <div class="multicol">
                        <div class="control-group">
                            <div class="controls">
                                <div id="chart_div" style="width: 900px; height: 500px;"></div>
                            </div>
                            <div class="controls">
                                <div id='table_div'></div>
                            </div>
                        </div>
                    </div>
                </div>
            </fieldset>

        </div>
    </div>
</asp:Content>
